import './index.scss'
import { DotLoading } from 'antd-mobile'
import { useProduct } from './usePro'
import GeneralCard from '@/components/GeneralCard'
// import BreadNav from '@/components/BreadNav'
import Bread from '@/components/Bread'
// import { Link } from 'react-router-dom'

type Item  = 
{
    id?: number;
    title?: string;
    link:string;
    classname?: string
}

const Product = () => {
    // 逻辑业务
    const { headers, imgs, isLoading } = useProduct()
    const breadNav: Item[] = [
      { id: 1, title: 'Product', link: '/product', classname: '' },
      { id: 2, title: headers?.title, link: `/product/${headers?.id}`, classname: 'active' },
    ]
    // UI 渲染
    return (
      <div className='container'>
        {isLoading ? <div className='content-box'><span>Loading</span><DotLoading /></div> :
          <div className='content-box'>
            {/* 次导航 */}
            {/* <div className='bread-box'>
              <div className="bread-item"><Link to='/' ><span className='iconfont icon-zhuye'></span></Link></div>
              
              {breadNav.map((item) => (
                <BreadNav title={item.title} link='' classname={item.classname} key={item.link}/>
              ))}
            </div> */}
            <Bread items={breadNav}/>
            {imgs.map((item) => (
                <GeneralCard 
                  src={item.image} 
                  alt={item.alt} 
                  title={item.title} 
                  desc={item.description}
                  link={`/product/list/${item.id}`}
                  key={item.id}
                  classname='Product-display'/>
              ))}
          </div>
        }

      </div>
    )
  }
  
  export default Product
  